<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>登陆您的账户</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/Public/style/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/Public/style/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="/Public/style/css/semantic.min.css" />
        <script type="text/javascript" src="/Public/style/javascript/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="/Public/style/javascript/bootstrap.min.js"></script>
        <script type="text/javascript" src="/Public/style/javascript/semantic.min.js"></script>
    </head>
    <body style='margin: 0;padding: 0'>
        
        <div class="ui tiered menu red">
            <div class="menu">
                <a class="active item">
                    <i class="users icon"></i>
                    朋友们
                </a>
                <a class="item">
                    <i class="grid layout icon"></i> 浏览
                </a>
                <a class="item">
                    <i class="mail icon"></i> 消息
                </a>
                <a class="item" href="{:U('/Home/Index/addfriend'),'',''}">
                    <i class="plus icon"></i> 添加朋友
                </a>
                <div class="right menu">
                    <div class="ui dropdown item">
                        More <i class="icon dropdown"></i>
                        <div class="menu">
                            <a class="item"><i class="edit icon"></i>编辑个人信息</a>
                            <a class="item"><i class="globe icon"></i>选择语言</a>
                            <a class="item"><i class="settings icon"></i>账户设置</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class='ui sub menu'>
                <div class="ui item  segment  active">
                    <h4>您现在记录了189个朋友的信息</h4>
                </div>
                
            </div>
        </div>
        
        <div class='container'>
            
            <div class='row'>
                <div class='col-md-1 hidden-xs'></div>
                <div class='col-md-10 col-xs-12'>
                   
                    <div class='row'>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">田仁山</div>
                                <div class="panel-body">
                                    <div class="ui inverted ">
                                        <div class="ui inverted relaxed divided list">
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">认识时间</div>
                                                    2014年6月26日
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">认识地点</div>
                                                    在火车上
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">他的特点</div>
                                                    蛮多的
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
       
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">田仁山</div>
                                <div class="panel-body">
                                    <div class="ui inverted ">
                                        <div class="ui inverted relaxed divided list">
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">认识时间</div>
                                                    2014年6月26日
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">认识地点</div>
                                                    在火车上
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">他的特点</div>
                                                    蛮多的
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="content">
                                                    <div class="header">他的特点</div>
                                                    <p>Semantic是围绕自然交流语言而架构的，这使得开发更加直观（易于理解）。</p>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="panel panel-default">
                                <div class="panel-heading">Panel heading without title</div>
                                <div class="panel-body">
                                  Panel content
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>
                    <!--分隔条-->
                    <div class="ui horizontal icon divider"><i class="circular heart icon red"></i></div>
                    <!--提示信息-->
                    <div class='row'>
                        <div class='col-md-12'>
                            <div class="alert alert-success" role="alert">为了保持您对您的朋友的最初印象，我们队您所输入的内容不提供修改功能，您可以继续添加您的您的朋友印象或者看法</div>
                        </div>
                    </div>
                </div>
                <div class='col-md-1 hidden-xs'></div>
            </div>
            
        </div>
        
        
        <script>
            $(function(){
                $('.ui.dropdown').dropdown();
            })
        </script>
        
    </body>
</html>
